import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'

import Detail from './Detail'

export default class Message extends Component {

	state = {
		messageArr: [
			{id: '01', title: "消息1"},
			{id: '02', title: "消息2"},
			{id: '03', title: "消息3"},
		]
	}


	// 这些都是history中的api
	replaceShow = (id, title) => {
		// 编写一段代码，让其跳转到Detail组件，且不留下痕迹，replace跳转， 携带params参数
		// this.props.history.replace(`/home/message/detail/${id}/${title}`)

		// replace跳转 + 携带search参数
		// this.props.history.replace(`/home/message/detail?id=${id}&$title={title}`)

		// replace跳转 + 携带state参数
		this.props.history.replace(`/home/message/detail`, {id, title})
	}

	pushShow = (id, title) => {
		// 编写一段代码，让其跳转到Detail组件,可留下痕迹
		// this.props.history.push(`/home/message/detail/${id}/${title}`)

		// push跳转 + 携带search参数
		// this.props.history.push(`/home/message/detail?id=${id}&$title={title}`)

		// replace跳转 + 携带state参数
		this.props.history.push(`/home/message/detail`, {id, title})
	}

	// 回退
	back = () => {
		this.props.history.goBack()
	}

	// 前进
	forward = () => {
		this.props.history.goForward()
	}

	go = () => {
		this.props.history.go(2)
	}

	render() {
		const {messageArr} = this.state
		return (
			<div>
				<ul>
					{
						messageArr.map((msgObj)=>{
							return (
								<li key={msgObj.id}>
									{/* 向路由组件传递params参数 */}
									{/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp; */}

									{/* 向路由组件传递search参数 */}
									{/* <Link to ={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}

									{/* 向路由组件传递state参数 */}
									{/* 默认为push模式，这个模式下，在浏览器的后退中，可以回到上一个url的链接，，，，replace则无法回到上一条 */}
									<Link  replace to ={{pathname:'/home/message/detail', state:{id:msgObj.id, title:msgObj.title}}}>{msgObj.title}</Link>

									<button onClick={()=>{this.pushShow(msgObj.id, msgObj.title)}}>push查看</button>&nbsp;&nbsp;
									<button onClick={()=>{this.replaceShow(msgObj.id, msgObj.title)}}>replace查看</button>
								</li>			
							)
						})
					}
				</ul>
				<hr />
				{/* 注册路由，声明接收params参数 */}
				{/* <Route path="/home/message/detail/:id/:title" component={Detail} /> */}

				{/* 注册路由，声明接收search参数，无需声明接收，正常注册路由即可 */}
				{/* <Route path="/home/message/detail" component={Detail} /> */}

				{/* 注册路由，声明接收state参数，无需声明接收，正常注册路由即可，url地址栏中不会携带参数 */}
				<Route path="/home/message/detail" component={Detail} />

				<button onClick={this.back}>回退</button>
				<button onClick={this.forward}>前进</button>
				<button onClick={this.go}>前进2</button>
			</div>
		)
	}
}
